*{
    margin: 0;
    padding:0;
    list-style: none;
    box-sizing: border-box;
}

.wrap{
    width:800px;
    height:500px;
    margin: 150px auto;
}
.title{
    width:120px;
    height:100%;
    float: left;
    background: red;
}
.title span{
    width:100%;
    height:100px;
    line-height: 100px;;
    text-align: center;
    display: block;
    border: 1px solid #ccc;
}
.title span.active{
  background: #ccc;
  color:#fff;
}
.content{
    width:680px;
    height:100%;
    float: left;
    background: green;
}
.content .con{
    width:100%;
    height:100%;
    display: none;
}
.content .con.active{
    display: block;
}

.con .header{
    width:100%;
    height:80px;
}
.con .header span{
    width:25%;
    height:100%;
    float: left;
    border: 1px solid #555;
    line-height: 80px;
    text-align: center;
}

.con .header span.active1{
    background: pink;
    color:#fff;
}

.bottom{
    height:400px;
    width:100%;
}
.bottom .bottom-con{
    display: none;
    width:100%;
    height:100%;
}

.bottom .bottom-con.active1{
    display: block;
   
}

